<template>
  <div>
    <div class="bind-box flex-row-sb-center" style="border-bottom: 1px solid #F3F3F3;">
      <div>
        <label class="title">手机号</label>
        <input class="text" placeholder="请输入新的手机号码" v-model="captchas.new_mobile" type="tel" />
      </div>
      <div>
        <button v-if="!reSend" class="get-code" @click="getValidCode">获取验证码</button>
        <button v-else class="get-code resend">{{seconds}}s后重新获取</button>
      </div>
    </div>
    <div class="bind-box">
      <label class="title">验证码</label>
      <input class="code-inp" v-model="validate.validate_code" @input="isValid" placeholder="请输入验证码" />
    </div>
    <button :class="['valid-btn', valid? 'valid' : '']" @click="validationCodeIsValid" :disabled="!valid">验证后绑定新手机号</button>
    <div v-if="captchaVisible" class="captchas-panel flex-row-center">
      <div class="captchas-box">
        <p class="captchas-title">请填写图像验证码</p>
        <div class="captchas-item1">
          <input class="captchas-inp" v-model="captchas.captcha_value" maxlength="6" />
          <img class="captchas-img" :src="captchas_img" />
        </div>
        <div class="captchas-item2">
          <button class="captchas-btn captchas-btn-cancel" @click="captchaVisible = false">取消</button>
          <button class="captchas-btn captchas-btn-confirm" @click="verificationValue">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { sendValidCode, getCaptchas } from '@/api/elm-data'
export default {
  name: 'change-phone',
  data() {
    return {
      valid: false,
      validate: {
        validate_code: '',
        validate_token: ''
      },
      isValid: false,
      seconds: 60,
      reSend: false,
      captchas: {
        new_mobile: '',
        captcha_hash: '',
        captcha_value: ''
      },
      captchas_img: '',
      captchaVisible: false
    }
  },
  methods: {
    async getValidCode() {
      if(!(/^1(3|4|5|6|7|8|9)\d{9}$/).test(this.captchas.new_mobile)){
        return this.$toast('请输入正确的电话号码')
      }
      try {
        const { data } = await sendValidCode(window.sessionStorage.getItem('USER_ID'), {new_mobile: this.captchas.new_mobile})
        this.reSend = true
        const interval = setInterval(() => {
          this.seconds--
          if(this.seconds <=0) {
            clearInterval(interval)
            this.reSend = false
            this.seconds = 60
          }
        }, 1000)
      }catch(e) {
        this.reSend = false
        const { data:res } = await getCaptchas({captcha_str: this.captchas.new_mobile})
        console.log(res)
        this.captchas.captcha_hash = res.captcha_hash
        this.captchaVisible = true
        this.captchas_img = res.captcha_image
      }

    },
    async verificationValue() {
      try {
        const { data } = await sendValidCode(window.sessionStorage.getItem('USER_ID'), this.captchas)
        this.$toast('验证码已发送')
        this.validate.validate_token = data.validate_token
        this.captchaVisible = false
        this.captchas.captcha_value = ''
      }catch(e) {
        this.captchaVisible = false
        this.captchas.captcha_value = ''
        this.$toast('验证码错误')
      }
    },
    validationCodeIsValid() {}
  },
  beforeRouteEnter(to, from, next) {
    if(from.path === '/bindphone' || from.path === '/') {
      next()
    }else {
      if(window.sessionStorage.getItem('token')) {
        next('/bingphone')
      }else {
        next('/login')
      }
    }
  }
}
</script>

<style scoped>
  .bind-box {
    display: flex;
    align-items: center;
    padding: 30px 20px;
    background-color: #fff;
  }
  .title {
    padding: 0 20px;
    font-size: 32px;
  }
  .text {
    font-size: 30px;
    border: none;
  }
  .get-code {
    padding: 10px 20px;
    background-color: #0097FF;
    color: #fff;
    font-size: 28px;
  }
  .code-inp {
    background-color: transparent;
    border: none;
    font-size: 28px;
  }
  .valid-btn {
    display: block;
    margin: 20px auto;
    padding: 20px 0;
    width: 90%;
    background-color: #e3e3e3;
    color: #fff;
    font-size: 36px;
  }
  .valid {
    background-color: #00D762;
  }
  .captchas-panel {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(00, 0, 0, .4);
  }
  .captchas-box {
    padding-top: 10px;
    background-color: #f7f7f7;
    border-radius: 15px;
  }
  .captchas-title {
    font-weight: 600;
    font-size: 34px;
    text-align: center;
  }
  .captchas-item1 {
    display: flex;
    margin: 0 20px;
    background-color: #fff;
  }
  .captchas-inp {
    padding-left: 5px;
    border: none;
    font-size: 28px;
  }
  .captchas-img {
    height: 68px;
    width: 200px;
  }
  .captchas-item2 {
    display: flex;
    margin-top: 20px;
  }
  .captchas-btn {
    box-sizing: border-box;
    flex: 1;
    padding: 30px;
    background-color: transparent;
    border: 1px solid #dedede;
    font-size: 34px;
  }
  .captchas-btn-cancel {
    color: #818181;
  }
  .captchas-btn-confirm {
    color: #00A9FF;
  }
  .resend {
    background-color: #D8D8D8;
  }
</style>
